<template>
  <div id="topBar">
    <i id="switch" :class="$store.state.isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
       @click="$store.commit('switch')"></i>
    <Breadcrumb style="line-height: 50px;width: 200px;float: left"></Breadcrumb>
    <el-image fit="fit" :src="title" alt="" style="height:50px;float: right;margin:0 15px;"></el-image>
    <Avatar id="Avatar"></Avatar>
  </div>

</template>

<script>
import Avatar from "../common/Avatar"
import Breadcrumb from "../content/Breadcrumb"
import title from "@/assets/img/title.png"

export default {
  name: "TopBar",
  components: {
    Avatar, Breadcrumb
  },
  data(){
    return{
      title:title
    }
  }
}
</script>

<style scoped>
#topBar {
  width: 100%;
  height: 50px;
  background-color: #fff;
  box-shadow: 2px 2px 2px rgb(243, 244, 245);
  border-bottom: 1px solid rgb(243, 244, 245);
  box-sizing: border-box;
  position:relative;
}
.title{
  height:50px;
  position: absolute;
  right: 20px
}
#path {
  line-height: 50px;
  float: left;
}

#switch {
  cursor: pointer;
  float: left;
  font-size: 26px;
  line-height: 50px;
  height: 100%;
  width: 50px;
  text-align: center;
}

#switch:hover {
  background-color: rgb(249, 249, 249);
}

#Avatar {

  /*position: absolute;*/
  /*left: 80%;*/
  float: right;
  line-height: 50px;
  cursor: pointer;
}

.slide-fade-enter-active {
  transition: all .3s ease;
  transition-delay: .3s;
}

.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to
   /*.slide-fade-leave-active for below version 2.1.8*/
{
  transform: translateX(10px);
  opacity: 0;
}
</style>